<template>
  <div
    :class="[
      app.isVertical ? 'vertical-header-right' : '',
      app.isMix || app.isHorizontal ? 'horizontal-header-right' : ''
    ]"
  >
    <!-- 菜单搜索 -->
    <Search />
    <!-- 通知 -->
    <Notice id="header-notice" />
    <!-- 退出登录 -->
    <el-dropdown trigger="click">
      <span class="select-none el-dropdown-link navbar-bg-hover">
        <img
          :src="userLogo"
          :style="{ marginRight: '10px', width: 22 + 'px' }"
        />
        <p class="dark:text-white">{{ user.getUser?.nickName || "未知" }}</p>
      </span>
      <template #dropdown>
        <el-dropdown-menu class="logout">
          <el-dropdown-item @click="logout()">
            <IconifyIconOffline
              :icon="LogoutCircleRLine"
              style="margin-right: 6px"
            />
            退出系统
          </el-dropdown-item>
          <el-dropdown-item @click="updatePassWord()">
            <el-icon><EditPen /></el-icon>
            修改密码
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <span
      class="set-icon navbar-bg-hover"
      title="打开项目配置"
      @click="onPanel"
    >
      <IconifyIconOffline :icon="Setting" />
    </span>
  </div>
</template>
<script setup lang="ts">
// 导入公共样式
import "@/style/sidebar.scss";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import { EditPen } from "@element-plus/icons-vue";
import Setting from "@iconify-icons/ri/settings-3-line";
import { useUserHooks } from "@/core/pinia/store/user.store";
import { useAppHooks } from "@/core/pinia/store/app.store";
import { RxEvent } from "@/core/event/event";
import { Helper } from "@/core/helper/helper.service";
import UpdatePassword from "../model/update-password/index.vue";
const app = useAppHooks();
const user = useUserHooks();
const onPanel = () => {
  RxEvent.emitShowSetting(true);
};
const userLogo = `https://api.multiavatar.com/${decodeURIComponent(
  user.user?.username || ""
)}.png`;
const updatePassWord = () => {
  Helper.showDialog({
    title: "修改密码",
    component: UpdatePassword,
    footer: false,
    size: "md"
  }).subscribe(() => {
    console.log(111);
  });
};
const logout = () => {
  user.logout();
};
</script>
<style lang="scss" scoped>
.vertical-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 280px;
  height: 48px;
  color: #000000d9;

  .el-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 48px;
    padding: 10px;
    color: #000000d9;
    cursor: pointer;

    p {
      font-size: 14px;
    }

    img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
    }
  }
}
.logout {
  max-width: 120px;
  ::v-deep(.el-dropdown-menu__item) {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 100%;
  }
}
</style>
